<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="cuiyuan" />
		<meta name="Keywords" content="cuiyuan的博客"/>
		<meta name="Description" content="cuiyuan的博客,技术分享,记录回忆"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>cuiyuan的博客-文章</title>
		
		<link rel="shortcut icon" href="img/touch-icon-iphone-144.png">
		<link rel="apple-touch-icon" sizes="57x57" href="img/touch-icon-iphone-144.png" />
		<link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-iphone-144.png" />
		<link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone-144.png" />
		<link  rel="apple-touch-icon" sizes="144x144" href="img/touch-icon-iphone-144.png" />
		
		<link rel="stylesheet" href="css/iconfont.css">
		<link rel="stylesheet" href="css/common.css"/>
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/selector.js"></script>
		<style type="text/css">
			.B_article { min-height: 1200px; padding: 10px; }
			.B_article h2 { text-align: center; font-size: 20px; letter-spacing: 1px; }
			.B_article img { margin: 0 auto; display: block; }
			.B_article h3 { margin: 14px 0; letter-spacing: 1px; color: rgba(0,0,0,.8); }
			.B_article p { margin-bottom: 10px; line-height: 24px; letter-spacing: 1px; text-indent: 50px; }
		</style>
	</head>
	<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false" onselect="document.selection.empty()">
		<!--[if lt IE 8]>
			<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> to improve your experience.</p>
		<![endif]-->
		<header>
			<div class="header-box">
				<p>		
					“他说风雨中这点痛算什么，擦干泪不要怕，至少我们还有梦!”
					“我相信我就是我，我相信明天，我相信青春没有地平线。”
				</p>
				<div class="box">
					<div class="light"></div>
					<span class="box1">
						<div class="star">
							<div class="srT sr1"></div>
							<div class="srL sr2"></div>
							<div class="srL sr3"></div>
							<div class="srT sr4"></div>
							<div class="spot"></div>
						</div>
					</span>
					<span class="box2">
						<div class="star">
							<div class="srT sr1"></div>
							<div class="srL sr2"></div>
							<div class="srL sr3"></div>
							<div class="srT sr4"></div>
							<div class="spot"></div>
						</div>
					</span>
				</div>
				<div class="album r">
					<img src="img/h1.jpg" alt="相册"/>
				</div>
				<div class="album r">
					<img src="img/h2.jpg" alt="相册"/>
				</div>
			</div>
		</header>
		<nav class="nav">
			<div class="title l">记录回忆</div>
			<ul>
				<li class="current"><a href="index.html">首页</a></li>
				<li><a href="study.html">学无止境</a></li>
				<li><a href="css-js.html">CSS/JS特效</a></li>
				<li><a href="http://www.lmlblog.com/blog/11/" target="_blank">博客模板</a></li>
				<li><a href="message.html">留言板</a></li>
			</ul>
		</nav>
		<div class="embellish">
			<a class="rocket"></a>
			<div class="aside"></div>
		</div>
		<section>
		<article>
			<aside class="left-box l">
				<div class="art Label clearfix">
					<h2 class="art-txt"> <em class="iconfont icon-biaoqian "></em> <span>热门标签</span> </h2>
					<div> 
						<a class="btn label" href="#">微信小程序</a><a class="btn label" href="#">数据图表</a>
						<a class="btn label" href="#">多类按钮</a><a class="btn label" href="#">特色轮播图</a>
						<a class="btn label" href="#">后台管理</a><a class="btn label" href="#">统计曲线图</a>
						<a class="btn label" href="#">SEO优化</a><a class="btn label" href="#" >响应式</a>
					</div>
				</div>
				<div class="art Music mt20 clearfix">
					<h2 class="art-txt"> <em class="iconfont icon-xing "></em> <span>我的音乐</span> </h2>
					<iframe src="min-music.html" width="320" height="225"></iframe>
				</div>
				<div class="art Follow clearfix">
					<h2 class="art-txt"> <em class="iconfont icon-xing "></em> <span>关注UP主</span> </h2>
					<div class="two-code">
						<img src="img/blibli.png" alt="扫一扫，关注我哦">
						<p class="sao-txt">扫一扫二维码，关注UP主！</p>
					</div>
				</div>
				<div class="art Link mt20 clearfix">
					<h2 class="art-txt"> <em class="iconfont icon-lianjie"></em> <span>友情链接</span> </h2>
					<ul class="fri-link">
						<li><a href="https://www.w3school.com.cn/" target="_blank" rel="nofollow">w3school</a></li>
						<li><a href="https://www.runoob.com/" target="_blank" rel="nofollow">菜鸟联盟</a></li>
						<li><a href="https://www.bejson.com/default.htm" target="_blank" rel="nofollow">在线json工具</a></li>
						<li><a href="https://cli.im/" target="_blank" rel="nofollow">草料二维码</a></li>
						<li><a href="https://www.iconfont.cn/" target="_blank" rel="nofollow">阿里巴巴矢量图库</a></li>
						<li><a href="https://www.aliyun.com/minisite/goods?userCode=2ebbhwss&share_source=copy_link&accounttraceid=b858bc8681db48cbaf2622a59c53bf8dutwv" target="_blank" rel="nofollow">阿里云小站</a></li>
					</ul>
				</div>
			</aside>
			<div class="art-right r">
				<div class="B_article">
					<h2>网站三层架构(结构层-表现层-行为层)</h2>
					<h3>网站三层架构(结构层-表现层-行为层)如下图：</h3>
					<img src="./img/7.jpg" >
					<h3>结构层</h3>
					<p>1、html(Hypertext Markup Language)超文本标记语言 是用于描述网页文档的一种标记语言。</p>
					<p>2、XML(The Extensible Markup Language)可扩展标识语言，XML最初设计的目的是弥补HTML的不足，后来逐渐用于网络数据的转换和描述。</p>
					<p>3、XHTML(The Extensible HyperText Markup Language)可扩展超文本标识语言，XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML.简单来说，建立XHTML的目的就是实现HTML向XML的过渡。目前很多网站都处于XHTML过渡的阶段。</p>
					<p>4、HTML5 是用于取代HTML4.01和XHTML1.0标准的HTML标准版本。现在HTML5技术已经悄然在整个移动互联网蔓延,从各种H5专题,到H5小游戏。</p>
					<h3>表现层</h3>
					<p>CSS是Cascading Style Sheets 层叠样式表的缩写，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。</p>
					<h3>行为层</h3>
					<p>1、DOM是Document Object Model文档对象模型的缩写。DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件，包括数据、脚本和表现层对象。</p>
					<p>2、ECMAScript是ECMA(European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言(javascript)</p>
				</div>
			</div>
		</article>
		</section>
		<footer class="clearfix"><p>@cuiyuan的个人博客</p></footer>
		<script type="text/javascript" src="js/common.js"></script>
	</body>
</html>
